<template>
  <div class="formatted-content">
    <!-- 添加全局下载按钮 -->
    <div class="global-download">
      <el-button 
        type="primary" 
        icon="el-icon-download"
        @click="downloadFullContent"
        size="small"
        class="download-full-btn"
      >下载</el-button>
    </div>
    <div 
      class="markdown-content" 
      ref="markdownContainer"
      v-html="compiledMarkdown"
    > 
  
  </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import MarkdownIt from 'markdown-it';
import htmlDocx from 'html-docx-js/dist/html-docx';
import FileSaver from 'file-saver';
import domtoimage from 'dom-to-image';

@Component
export default class FormattedContent extends Vue {
  @Prop({ required: true }) content!: string;
  private isDownloading = false;
  private md: MarkdownIt = new MarkdownIt({
    html: true,
    linkify: true,
    typographer: true
  });
  
  private compiledMarkdown: any = '';
  private htmlPreviews: Array<{
    id: string;
    code: string;
    element: HTMLElement | null;
    isEditing: boolean;
    editedCode: string;
  }> = [];

  mounted() {
    this.processContent();
    this.$nextTick(() => {
      this.attachPreviews();
    });
  }

  @Watch('content')
  onContentChanged() {
    this.processContent();
    this.$nextTick(() => {
      this.attachPreviews();
    });
  }

  private processContent() {
    this.compiledMarkdown = this.md.render(this.content);
    this.htmlPreviews = [];
  }

  private attachPreviews() {
    const container = this.$refs.markdownContainer as HTMLElement;
    if (!container) return;
    
    const codeBlocks = container.querySelectorAll('pre code.language-html');
    this.htmlPreviews = [];
    
    codeBlocks.forEach((codeBlock, index) => {
      const id = `preview-${Date.now()}-${index}`;
      const code = codeBlock.textContent || '';
      
      const previewContainer = document.createElement('div');
      previewContainer.className = 'html-preview-container';
      previewContainer.id = id;
      
      const preElement = codeBlock.closest('pre');
      if (preElement && preElement.parentNode) {
        preElement.parentNode.replaceChild(previewContainer, preElement);
      }
      this.htmlPreviews.push({
        id,
        code,
        element: previewContainer,
        isEditing: false,
        editedCode: code
      });
      this.renderPreview(id, code);
    });
  }

  private renderPreview(id: string, code: string) {
    const container = document.getElementById(id);
    if (!container) return;
    
    const preview = this.htmlPreviews.find(p => p.id === id);
    if (!preview) return;
    
    container.innerHTML = `
      <div class="preview-header">
        <div class="header-left">
          <span class="lang-tag">
            <i class="fab fa-html5"></i>
            <span>HTML</span>
          </span>
          <div class="preview-actions">
            <button class="action-btn edit-btn" data-id="${id}">
              <i class="fas fa-edit"></i>
              <span>${preview.isEditing ? '取消编辑' : '编辑代码'}</span>
            </button>
            <button class="action-btn copy-btn" data-id="${id}">
              <i class="fas fa-copy"></i>
              <span>复制代码</span>
            </button>
            <button class="action-btn refresh-btn" data-id="${id}">
              <i class="fas fa-sync-alt"></i>
              <span>刷新预览</span>
            </button>
            <button class="action-btn download-btn" data-id="${id}">
              <i class="fas fa-file-download"></i>
              <span>下载代码</span>
            </button>
            <button class="action-btn fullscreen-btn" data-id="${id}">
              <i class="fas fa-expand"></i>
              <span>全屏</span>
            </button>
            <button class="action-btn action-hint" data-id="${id}">
              <i class="fas fa-edit"></i>
              <span>${preview.isEditing ? '编辑模式' : '实时预览'}</span>
            </button>
          </div>
        </div>
      </div>
      <div class="preview-content" style="${preview.isEditing ? 'display:none' : ''}">
        <iframe 
          srcdoc="${this.escapeHtml(preview.isEditing ? preview.editedCode : code)}"
          sandbox="allow-scripts allow-forms allow-same-origin"
          class="preview-iframe"
        ></iframe>
      </div>
      <div class="edit-container" style="${preview.isEditing ? '' : 'display:none'}">
        <textarea class="code-editor" data-id="${id}" spellcheck="false">${this.escapeHtmlForTextarea(preview.editedCode)}</textarea>
        <div class="edit-actions">
          <button class="action-btn save-btn" data-id="${id}">
            <i class="fas fa-save"></i><span>保存</span>
          </button>
          <button class="action-btn reset-btn" data-id="${id}">
            <i class="fas fa-undo"></i><span>重置</span>
          </button>
        </div>
      </div>
    `;
    
    // 绑定按钮事件
    this.bindPreviewEvents(id, container, code);
  }

  private bindPreviewEvents(id: string, container: HTMLElement, originalCode: string) {
    const preview = this.htmlPreviews.find(p => p.id === id);
    if (!preview) return;
    
    // 编辑按钮
    const editBtn = container.querySelector(`.edit-btn[data-id="${id}"]`);
    if (editBtn) {
      editBtn.addEventListener('click', () => {
        preview.isEditing = !preview.isEditing;
        this.renderPreview(id, originalCode);
      });
    }
    
    // 复制按钮
    const copyBtn = container.querySelector(`.copy-btn[data-id="${id}"]`);
    if (copyBtn) {
      copyBtn.addEventListener('click', () => {
        navigator.clipboard.writeText(preview.isEditing ? preview.editedCode : preview.code);
        this.showActionFeedback(copyBtn, '已复制!');
      });
    }
    
    // 刷新按钮
    const refreshBtn = container.querySelector(`.refresh-btn[data-id="${id}"]`);
    if (refreshBtn) {
      refreshBtn.addEventListener('click', () => {
        this.renderPreview(id, preview.isEditing ? preview.editedCode : preview.code);
        this.showActionFeedback(refreshBtn, '已刷新!');
      });
    }
    
    // 下载按钮
    const downloadBtn = container.querySelector(`.download-btn[data-id="${id}"]`);
    if (downloadBtn) {
      downloadBtn.addEventListener('click', () => {
        this.downloadAsWord(id, preview.isEditing ? preview.editedCode : preview.code);
      });
    }
    
    // 全屏按钮
    const fullscreenBtn = container.querySelector(`.fullscreen-btn[data-id="${id}"]`);
    if (fullscreenBtn) {
      fullscreenBtn.addEventListener('click', () => {
        const iframe = container.querySelector('iframe');
        if (iframe) {
          if (iframe.requestFullscreen) {
            iframe.requestFullscreen();
          }
        }
      });
    }
    
    // 保存按钮（编辑模式）
    const saveBtn = container.querySelector(`.save-btn[data-id="${id}"]`);
    if (saveBtn) {
      saveBtn.addEventListener('click', () => {
        const editor = container.querySelector(`.code-editor`) as HTMLTextAreaElement;
        if (editor) {
          preview.editedCode = editor.value;
          preview.isEditing = false;
          this.renderPreview(id, preview.editedCode);
        }
      });
    }
    
    // 重置按钮（编辑模式）
    const resetBtn = container.querySelector(`.reset-btn[data-id="${id}"]`);
    if (resetBtn) {
      resetBtn.addEventListener('click', () => {
        preview.editedCode = preview.code;
        const editor = container.querySelector(`.code-editor`) as HTMLTextAreaElement;
        if (editor) {
          editor.value = preview.code;
        }
      });
    }
    
    // 编辑器变化事件
    const editor = container.querySelector(`.code-editor`);
    if (editor) {
      editor.addEventListener('input', (e) => {
        const target = e.target as HTMLTextAreaElement;
        preview.editedCode = target.value;
      });
    }
  }

  // 当iframe加载完成时执行
  private onIframeLoaded(id: string) {
    const container = document.getElementById(id);
    if (!container) return;
    
    const iframe = container.querySelector('iframe') as HTMLIFrameElement;
    if (!iframe || !iframe.contentDocument) return;
    
    // 添加ECharts截图按钮
    const echartsContainers = iframe.contentDocument.querySelectorAll('.echarts');
    echartsContainers.forEach((chartContainer, index) => {
      const chartId = `chart-${id}-${index}`;
      chartContainer.id = chartId;
      
      // 添加截图按钮
      const btnContainer = document.createElement('div');
      btnContainer.style.position = 'absolute';
      btnContainer.style.top = '5px';
      btnContainer.style.right = '5px';
      btnContainer.style.zIndex = '1000';
      
      const captureBtn = document.createElement('button');
      captureBtn.innerHTML = '<i class="fas fa-camera"></i> 截图';
      captureBtn.style.background = 'rgba(64, 158, 255, 0.8)';
      captureBtn.style.color = 'white';
      captureBtn.style.border = 'none';
      captureBtn.style.borderRadius = '4px';
      captureBtn.style.padding = '4px 8px';
      captureBtn.style.cursor = 'pointer';
      captureBtn.style.fontSize = '12px';
      captureBtn.onclick = () => this.captureECharts(id, chartId);
      
      btnContainer.appendChild(captureBtn);
      chartContainer.parentNode?.insertBefore(btnContainer, chartContainer);
    });
  }

  // 捕获ECharts图表为图片
  private async captureECharts(previewId: string, chartId: string) {
    const preview = this.htmlPreviews.find(p => p.id === previewId);
    if (!preview) return;
    
    const container = document.getElementById(previewId);
    if (!container) return;
    
    const iframe = container.querySelector('iframe') as HTMLIFrameElement;
    if (!iframe || !iframe.contentDocument) return;
    
    const chartContainer = iframe.contentDocument.getElementById(chartId);
    if (!chartContainer) return;
    
    try {
      // 使用dom-to-image捕获图表
      const dataUrl = await domtoimage.toPng(chartContainer, {
        quality: 1,
        bgcolor: '#ffffff'
      });
      
      // 创建下载链接
      const link = document.createElement('a');
      link.href = dataUrl;
      link.download = `echarts-${new Date().getTime()}.png`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      
      this.$message.success('图表截图成功');
    } catch (error) {
      console.error('图表截图失败:', error);
      this.$message.error('图表截图失败');
    }
  }
 // 下载整个内容为Word文档
  private async downloadFullContent() {
    this.isDownloading = true;
    try {
      // 克隆整个内容
      const container = this.$refs.markdownContainer as HTMLElement;
      if (!container) return;
      
      const clonedContent = container.cloneNode(true) as HTMLElement;
      
      // 处理所有预览区域
      const previewContainers = clonedContent.querySelectorAll('.html-preview-container');
      
      // 处理所有预览区域中的ECharts图表
      for (const previewContainer of Array.from(previewContainers)) {
        const iframe = previewContainer.querySelector('iframe');
        if (iframe && iframe.contentDocument) {
          // 处理iframe中的ECharts图表
          const echartsContainers = iframe.contentDocument.querySelectorAll('.echarts');
          for (const chartContainer of Array.from(echartsContainers)) {
            try {
              // 捕获图表为图片
              const dataUrl = await domtoimage.toPng(chartContainer as HTMLElement, {
                quality: 1,
                bgcolor: '#ffffff'
              });
              
              // 创建图片元素替换图表
              const img = document.createElement('img');
              img.src = dataUrl;
              img.style.maxWidth = '100%';
              img.style.height = 'auto';
              img.style.border = '1px solid #ddd';
              img.style.margin = '10px 0';
              img.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
              
              // 替换原图表容器
              const parent = chartContainer.parentNode;
              if (parent) {
                parent.replaceChild(img, chartContainer);
              }
            } catch (error) {
              console.error('图表转换失败:', error);
            }
          }
          
          // 用iframe内容替换预览容器
          const contentDiv = document.createElement('div');
          contentDiv.innerHTML = iframe.contentDocument.body.innerHTML;
          previewContainer.replaceWith(contentDiv);
        }
      }
      
      // 处理普通图片
      const images = clonedContent.querySelectorAll('img');
      await Promise.all(Array.from(images).map(async img => {
        if (!img.src.startsWith('data:image')) {
          try {
            const response = await fetch(img.src);
            const blob = await response.blob();
            const reader = new FileReader();
            reader.readAsDataURL(blob);
            await new Promise(resolve => reader.onload = resolve);
            img.src = reader.result as string;
          } catch (error) {
            console.error('图片转换失败:', img.src, error);
          }
        }
      }));
      
      // 创建Word文档结构
      const docContent = `
        <!DOCTYPE html>
        <html>
        <head>
          <meta charset="UTF-8">
          <title>完整内容导出</title>
          <style>
            body { 
              font-family: Arial, sans-serif; 
              margin: 1cm;
              line-height: 1.6;
              color: #333;
            }
            h1, h2, h3, h4, h5, h6 {
              color: #2c3e50;
              margin-top: 1em;
              margin-bottom: 0.5em;
              border-bottom: 1px solid #eee;
              padding-bottom: 0.3em;
            }
            h1 { font-size: 1.8em; }
            h2 { font-size: 1.6em; }
            h3 { font-size: 1.4em; }
            h4 { font-size: 1.2em; }
            h5 { font-size: 1.1em; }
            h6 { font-size: 1em; }
            p { margin: 0.8em 0; }
            img { 
              max-width: 100%; 
              height: auto;
              margin: 0.5em 0;
              border: 1px solid #ddd;
              padding: 5px;
              background: #f8f8f8;
            }
            pre {
              background: #f8f8f8;
              padding: 10px;
              border: 1px solid #ddd;
              border-radius: 4px;
              overflow: auto;
              font-family: 'Courier New', monospace;
            }
            code {
              background: #f8f8f8;
              padding: 2px 4px;
              border-radius: 4px;
              font-family: 'Courier New', monospace;
            }
            blockquote {
              border-left: 4px solid #ddd;
              padding-left: 1em;
              margin: 1em 0;
              color: #666;
            }
            table {
              border-collapse: collapse;
              width: 100%;
              margin: 1em 0;
            }
            th, td {
              border: 1px solid #ddd;
              padding: 8px;
              text-align: left;
            }
            th {
              background-color: #f2f2f2;
            }
            .html-preview-container {
              margin: 1em 0;
              padding: 10px;
              background: #f8f8f8;
              border: 1px solid #ddd;
              border-radius: 4px;
            }
          </style>
        </head>
        <body>
          <h1>完整内容导出</h1>
          <p>导出时间: ${new Date().toLocaleString()}</p>
          <hr>
          ${clonedContent.innerHTML}
        </body>
        </html>
      `;
      
      // 转换为Word文档
      const converted = htmlDocx.asBlob(docContent, {
        orientation: 'portrait',
        margins: { top: 1000, right: 1000, bottom: 1000, left: 1000 }
      });
      
      // 下载文件
      FileSaver.saveAs(converted, `完整内容导出_${new Date().getTime()}.docx`);
      
      // 显示下载成功提示
      this.$message.success('文档下载成功');
    } catch (error) {
      console.error('下载完整内容失败:', error);
      this.$message.error('文档下载失败');
    } finally {
      this.isDownloading = false;
    }
  }

  // 下载单个代码块为Word文档
 private async downloadAsWord(id: string, htmlContent: string) {
    try {
      // 获取iframe中的最终渲染内容
      const container = document.getElementById(id);
      if (!container) return;
      
      const iframe = container.querySelector('iframe') as HTMLIFrameElement;
      if (!iframe || !iframe.contentDocument) return;
      
      // 克隆iframe内容
      const clonedContent = iframe.contentDocument.documentElement.cloneNode(true) as HTMLElement;
      
      // 处理图片 - 将base64图片转换为Blob
      const images = clonedContent.querySelectorAll('img');
      const imagePromises: Promise<void>[] = [];
      
      images.forEach(img => {
        if (img.src.startsWith('data:image')) {
          // 已经是base64格式，不需要转换
          return;
        }
        
        imagePromises.push(
          new Promise<void>((resolve) => {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            const imgElement = new Image();
            
            imgElement.crossOrigin = 'Anonymous';
            imgElement.onload = () => {
              canvas.width = imgElement.width;
              canvas.height = imgElement.height;
              if (ctx) {
                ctx.drawImage(imgElement, 0, 0);
                img.src = canvas.toDataURL('image/png');
              }
              resolve();
            };
            
            imgElement.onerror = () => {
              console.error('无法加载图片:', img.src);
              resolve();
            };
            
            imgElement.src = img.src;
          })
        );
      });
      
      // 等待所有图片处理完成
      await Promise.all(imagePromises);
      
      // 创建Word文档结构
      const docContent = `
        <!DOCTYPE html>
        <html>
        <head>
          <meta charset="UTF-8">
          <style>
            body { font-family: Arial, sans-serif; margin: 1cm; }
            img { max-width: 100%; height: auto; }
            h1, h2, h3 { color: #2c3e50; }
            .code-block { background: #f8f8f8; padding: 10px; border: 1px solid #ddd; }
          </style>
        </head>
        <body>
          <h1>HTML预览导出</h1>
          <p>导出时间: ${new Date().toLocaleString()}</p>
          <hr>
          ${clonedContent.innerHTML}
        </body>
        </html>
      `;
      
      // 转换为Word文档
      const converted = htmlDocx.asBlob(docContent, {
        orientation: 'portrait',
        margins: { top: 1000, right: 1000, bottom: 1000, left: 1000 }
      });
      
      // 下载文件
      FileSaver.saveAs(converted, `html-preview-${id}.docx`);
      
      // 显示下载成功提示
      const downloadBtn = container.querySelector(`.download-btn[data-id="${id}"]`);
      if (downloadBtn) {
        this.showActionFeedback(downloadBtn, '下载成功!');
      }
    } catch (error) {
      console.error('下载Word文档失败:', error);
      const container = document.getElementById(id);
      if (container) {
        const downloadBtn = container.querySelector(`.download-btn[data-id="${id}"]`);
        if (downloadBtn) {
          this.showActionFeedback(downloadBtn, '下载失败!');
        }
      }
    }
  }

 private showActionFeedback(button: Element, message: string) {
    const originalHtml = button.innerHTML;
    const feedback = document.createElement('div');
    feedback.className = 'action-feedback';
    feedback.textContent = message;
    
    button.innerHTML = '';
    button.appendChild(feedback);
    
    setTimeout(() => {
      button.innerHTML = originalHtml;
    }, 1500);
  }

  private escapeHtml(unsafe: string): string {
    return unsafe
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;");
  }
  
  private escapeHtmlForTextarea(unsafe: string): string {
    return unsafe
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;");
  }
}
</script>

<style scoped lang="scss">
.formatted-content{
  width: 100%;
  margin: 0 auto;
  padding: 0px;
  position: relative;
  
  .content-header {
    display: flex;
    justify-content: flex-end; /* 将按钮放在右上角 */
    padding: 0 0 15px 0; /* 底部留出空间 */
    position: relative;
    z-index: 100;
  }
  
  .global-download {
    /* 移除绝对定位 */
    float:right;
    margin-right: 20px;
    .download-full-btn {
      background: linear-gradient(135deg, #409eff, #66b1ff);
      color: white;
      border: none;
      padding: 8px 15px;
      border-radius: 4px;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
      }
    }
  }
  
  .markdown-content {
    padding-top: 0; /* 移除顶部内边距 */
    
   
  }
}
 ::v-deep .markdown-body {
      h1, h2, h3, h4, h5, h6 {
        display: block;
        margin-top: 1.2em;  /* 增加上边距 */
        margin-bottom: 0.8em; /* 增加下边距 */
        line-height: 1.5;   /* 增加行高 */
        padding-bottom: 0.4em;
        border-bottom: 1px solid #eaecef;
        clear: both;        /* 添加清除浮动 */
        position: relative; /* 为伪元素定位准备 */
        
        /* 添加标题装饰线 */
        &::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          width: 50px;
          height: 3px;
          background: linear-gradient(90deg, #409eff, #66b1ff);
        }
      }
      
      /* 调整各级标题大小 */
      h1 { font-size: 1.8em; margin-top: 1.5em; }
      h2 { font-size: 1.6em; }
      h3 { font-size: 1.4em; }
      h4 { font-size: 1.2em; }
      h5 { font-size: 1.1em; }
      h6 { font-size: 1.0em; color: #6a737d; }
      
      /* 修复标题后紧跟内容的问题 */
      h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
        margin-top: 1em !important;
      }
    }


/* ... (其他样式保持不变) ... */
::v-deep .html-preview-container {
  margin: 10px 0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 1px solid rgba(94, 234, 212, 0.15);
  
  .preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    height: 36px;
    background: linear-gradient(90deg, #1a202c, #2d3748);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    
    .header-left {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .header-right {
      height: 30px;
      float:right;
      .action-hint {
        background: rgba(94, 234, 212, 0.1);
        color: #5eead4;
        padding: 2px 8px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 500;
        border: 1px solid rgba(94, 234, 212, 0.2);
      }
    }
    
    .lang-tag {
      display: flex;
      align-items: center;
      gap: 4px;
      background: rgba(94, 234, 212, 0.15);
      color: #5eead4;
      padding: 4px 8px;
      border-radius: 4px;
      font-family: 'Roboto Mono', monospace;
      font-size: 0.75rem;
      font-weight: 500;
      align-content: center;
      margin-top: 10px;
      height: 24px;
      text-align: justify;
      
      i {
        font-size: 0.75rem;
      }
    }
    
    .preview-actions {
      display: flex;
      gap: 6px;
      height: 30px;
    }
  }
  
  .preview-content {
    padding: 1px;
    background: #0f172a;
    height:100%;
    .preview-iframe {
      width: 100%;
      height: 600px;
      border: none;
      background: white;
      display: block;
      border-radius: 0 0 6px 6px;
    }
  }
  
  .edit-container {
    padding: 8px;
    background: #0f172a;
    
    .code-editor {
      width: 100%;
      height: 350px;
      font-family: 'Roboto Mono', monospace;
      font-size: 0.9rem;
      padding: 10px;
      background: #1e293b;
      color: #cbd5e1;
      border-radius: 4px;
      border: 1px solid #334155;
      resize: vertical;
      white-space: pre;
      tab-size: 4;
    }
    
    
  }
}

::v-deep .edit-actions {
      display: flex;
      gap: 10px;
      margin-top: 8px;
      
      .action-btn {
        flex: 1;
        height: 30px;
        text-align: center;
      }
    }
::v-deep .action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  outline: none;
  position: relative;
  overflow: hidden;
  
  i {
    transition: transform 0.2s ease;
  }
  
  span {
    position: relative;
    z-index: 2;
  }
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    z-index: 1;
    transition: opacity 0.2s ease;
    opacity: 0;
  }
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    
    &::before {
      opacity: 1;
    }
    
    i {
      transform: scale(1.1);
    }
  }
  
  &:active {
    transform: translateY(1px);
  }
  
  &.edit-btn {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.9), rgba(124, 58, 237, 0.9));
    color: white;
    
    &:hover {
      background: linear-gradient(135deg, rgba(139, 92, 246, 1), rgba(124, 58, 237, 1));
      box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
    }
  }
  
  &.copy-btn {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.9), rgba(59, 130, 246, 0.9));
    color: white;
    
    &:hover {
      background: linear-gradient(135deg, rgba(96, 165, 250, 1), rgba(59, 130, 246, 1));
      box-shadow: 0 2px 8px rgba(96, 165, 250, 0.4);
    }
  }
  
  &.refresh-btn {
    background: linear-gradient(135deg, rgba(94, 234, 212, 0.9), rgba(56, 189, 248, 0.9));
    color: white;
    
    &:hover {
      background: linear-gradient(135deg, rgba(94, 234, 212, 1), rgba(56, 189, 248, 1));
      box-shadow: 0 2px 8px rgba(94, 234, 212, 0.4);
    }
  }
  
  &.download-btn {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.9), rgba(5, 150, 105, 0.9));
    color: white;
    
    &:hover {
      background: linear-gradient(135deg, rgba(16, 185, 129, 1), rgba(5, 150, 105, 1));
      box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
    }
  }
  
  &.fullscreen-btn {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.9), rgba(217, 119, 6, 0.9));
    color: white;
    
    &:hover {
      background: linear-gradient(135deg, rgba(245, 158, 11, 1), rgba(217, 119, 6, 1));
      box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
    }
  }
  
  &.save-btn {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.9), rgba(5, 150, 105, 0.9));
    color: white;
  }
  
  &.reset-btn {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.9), rgba(71, 85, 105, 0.9));
    color: white;
  }
}

.action-feedback {
  animation: fadeInOut 1.5s ease;
  font-weight: 600;
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(5px); }
  20% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-5px); }
}
</style>